<template>
    <div id="calendar">
        <div class="block">
            <el-date-picker v-model="year" type="year" format="yyyy年" placeholder="选择年">
            </el-date-picker>
        </div>

        <div class="wrapper my-calendar">
            <div class="title">{{ month }} {{ year }} </div>
            <el-calendar v-model="value" :first-day-of-week=7
                style="width:22.5vw;position:relative;border:1px solid rgba(20,20,20,.3) ;border-radius: 1%;">
                <template v-slot:dateCell="{ data }">
                    <div class="date-cell" @click.stop="click(data)">
                        <!-- 不要修改div.date-cell的样式，样式已在style.css定义 -->
                        <!-- 修改显示日期单元格的样式，请修改div.content的样式 -->
                        <!-- 单元格点击事件请定义在div.date-cell上,防止点击事件向上传播触发组件默认事件(切换月份) -->
                        <div class="content"> {{ data.day.split('-').slice(2)[0] }}</div>
                    </div>
                    <!-- <span>{{date}}</span> -->
                </template>
            </el-calendar>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'Calendar',
    data() {
        return {
            value: "",
            year: 2023,
            month: 1,
            num: 12
        };
    },
    created() {
    },
    methods: {

    },
};
</script>
<style>
/* 不显示上个月/今天/下个月按钮 */
.my-calendar .el-calendar .el-button.el-button--plain.el-button--mini {
    display: none;
}

/*不显示默认标题*/
.my-calendar .el-calendar .el-calendar__title {
    display: none;
}

/*通过将date-cell插槽完全覆盖在父标签上，阻止点击父标签的事件（跳转到上个月/下个月）*/
.my-calendar .el-calendar .el-calendar-day {
    margin: -0px;
    position: relative;
    height: 3vh;
}

/*定位插槽容器标签，完全覆盖在父标签上，写点击事件时，记得附带.stop事件修饰符，防止点击事件传播*/
/*将容器标签设为flex布局，实现子标签的完全居中*/
.my-calendar .el-calendar .date-cell {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px solid burlywood; */
}
</style>
  